<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="../../../include/meta.jsp"%>
<title>添加角色-通用权限管理系统</title>
<%@include file="../../../include/css.jsp"%>
<style type="text/css">
.form-group button {
	margin-bottom: 5px;
}
</style>
</head>
<body>
	<%@include file="../include/header.jsp"%>

	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/app/main.html"><i
					class="fas fa-home"></i>&nbsp;主页</a></li>
			<li class="breadcrumb-item">系统管理</li>
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/app/role/list.html">角色管理</a></li>
			<li class="breadcrumb-item active" aria-current="page">添加角色</li>
		</ol>
	</nav>

	<div class="container">
		<div class="row">
			<div class="col-12">
				<form action="${pageContext.request.contextPath}/app/role/save.html"
					method="post">
					<div class="form-group row">
						<label for="name">角色名</label> <input type="text"
							class="form-control" id="name" name="name" value="${role.name}"
							aria-describedby="helpName" autofocus> <small
							id="helpName" class="form-text text-danger">${msgName}</small>
					</div>

					<div class="form-group row">
						<label for="name">角色授权</label>
					</div>

					<c:forEach items="${functions}" var="f">
						<div class="form-group row">
							<div class="form-group form-check">
								<input type="checkbox" class="form-check-input" name="functions"
									id="fg${f.functionGroup.id}" value="${f.functionGroup.id}"
									onchange="choose('${f.functionGroup.id}')"> <label
									class="form-check-label" for="fg${f.functionGroup.id}">${f.functionGroup.name}</label>
							</div>
						</div>
						<div id="d${f.functionGroup.id}" class="form-group row"
							style="border-bottom: 1px solid #ccc; padding-left: 20px;">
							<c:forEach items="${f.functionModules}" var="fm">
								<div class="form-group form-check col-md-2">
									<input type="checkbox" class="form-check-input"
										name="functions" id="fm${fm.id}" value="${fm.id}"
										onchange="chooseFunctionGroup('${f.functionGroup.id}')">
									<label class="form-check-label" for="fm${fm.id}">${fm.name}</label>
								</div>
							</c:forEach>
						</div>
					</c:forEach>

					<div class="form-group row">
						<div class="col-md-4">
							<button type="submit" class="btn btn-primary btn-block">保存</button>
						</div>
						<div class="col-md-3">
							<button type="reset" class="btn btn-dark btn-block">重置</button>
						</div>
						<div class="col-md-2 offset-1">
							<a class="btn btn-secondary btn-block"
								href="${pageContext.request.contextPath}/app/role/list.html">返回列表页</a>
						</div>
						<div class="col-md-2">
							<a class="btn btn-secondary btn-block"
								href="${pageContext.request.contextPath}/app/main.html">返回主页</a>
						</div>
					</div>
				</form>
				<div id="message" class="text-danger">
					${message}
					<script type="text/javascript">
					setTimeout(function(){
						$("#message").text("");
					},3000);
				</script>
				</div>
			</div>
		</div>
	</div>

	<%@include file="../../../include/js.jsp"%>
	<script type="text/javascript">
	
		function choose(id){
			$("#d"+id+" :input[type='checkbox']").each(
				function(index,element){
					$(element).prop('checked', $("#fg"+id).prop("checked"));
				}
			);
		}
		
		
		function chooseFunctionGroup(id){
			allSelected=false;
			$("#d"+id+" :input[type='checkbox']").each(
				function(index,element){
					if($(element).prop("checked")){
						$("#fg"+id).prop("checked",true);
						allSelected=true;
						return;
					}
				}
			);	
			$("#fg"+id).prop("checked",allSelected);
		}
		
	
	</script>
</body>
</html>